<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LXQ 新版主页</title>

  <!-- 新 Bootstrap4 核心 CSS 文件 
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">-->
  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <!-- Bootstrap tooltips 
  <script src="js/popper.min.js"></script>-->
  <!-- Bootstrap core JavaScript -->
  <script src="js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script src="js/mdb.min.js"></script>
  <!-- MDB5 JavaScript 
  <script src="mdb5/js/mdb.min.js"></script>-->
  <!-- jQuery2.1 
    <script src="http://stares.okgoes.com/js/jquery-2.1.4.min.js"></script>-->
  <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js 
	<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>-->
  <!-- 最新的 Bootstrap4 核心 JavaScript 文件 
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>-->
  <!-- 获取所在城市 -->
  <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
  <!-- VUE -->
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <!-- greensock -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
  <!-- 导入bmob -->
  <script src="js/Bmob-2.2.5.min.js"></script>
  <!-- Compiled and minified CSS 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">-->
  <!-- Compiled and minified JavaScript 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>-->

  <!-- 主题颜色 -->
  <meta name="theme-color" content="#F93154">
  <!-- 自己写的样式 -->
  <link rel="stylesheet" href="css/index.css" />
  <!-- 多媒体查询 -->
  <link rel="stylesheet" href="css/index_media.css" />
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css" />
  <!-- Material Design Bootstrap -->
  <link rel="stylesheet" href="css/mdb.min.css" />
  <!-- 引入 echarts.js -->
  <!-- MDB5 CSS 
  <link rel="stylesheet" href="mdb5/css/mdb.min.css" />-->
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body class="my-srollbar1">

  <header style="width: 100%;">
    <nav class="navbar navbar-expand-lg fixed-top navbar-dark danger-color scrolling-navbar fixed-top">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
        aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
        <a class="navbar-brand" href="#">Excellent</a>
        <ul class="navbar-nav mr-auto mt-lg-0">
          <li class="nav-item active">
            <a class="nav-link" href="#">大屏幕 <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#column-div-1">自我介绍</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#column-div-1">专业技能</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#column-div-3">未来计划</a>
          </li>
          <!--<li class="nav-item">
            <a class="nav-link" href="#column-div-6">作品展示</a>
          </li>-->
          <li class="nav-item">
            <a class="nav-link" href="#column-div-4">我的日记</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#column-div-5">网友评论</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#html-end">最后</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-333" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">背景音乐
            </a>

            <div class="dropdown-menu dropdown-default" aria-labelledby="navbarDropdownMenuLink-333" id="music_list">
              <div class="dropdown-item">
                <iframe frameborder="no" marginwidth="0" marginheight="0" width=330 height=86
                  src="https://music.163.com/outchain/player?type=2&id=550138197&auto=1&height=66"></iframe>
              </div>
            </div>
          </li>
        </ul>
        <span class="navbar-text white-text" id="text-view-count">
          {{prefix}}{{newNum}}
        </span>
        <ul class="navbar-nav ml-auto nav-flex-icons">
          <li class="nav-item avatar">
            <a class="nav-link p-0" href="#">
              <img src="img/avatar.jpg" class="rounded-circle z-depth-0" alt="avatar image" height="35">
            </a>
          </li>
        </ul>

      </div>
    </nav>
    <div class="header-content header-bg">
      <div class="row">
        <div class="col-md-4"></div>
        <div class="my-name text-white text-center col-md-4">
          <img class="my-head-img hoverable waves-effect waves-light" src="img/me.jpg">
          <h1 class="h1-name my-text-spacing">My name is LXQ</h1>
          <div class="short-line"></div>
          <strong class="my-text-spacing my-normal-text-size">Where there is a well,there is a way</strong><br>
          <a class="btn btn-outline-white wow fadeInDown waves-effect waves-light" data-wow-delay="0.4s"
            style="visibility: visible; animation-name: fadeInDown; animation-delay: 0.4s; margin-top: 40px;">About
            me</a>
        </div>
        <div class="col-md-4"></div>
      </div>
  </header>
  <main style="width: 100%;">
    <!-- 自我介绍 -->
    <div id="column-div-1" class="column-div">
      <div>
        <h2 class="text-danger text-center column-title col-sm-12">自我介绍</h2>
      </div>

      <div class="row">
        <div class="col-md-6 dvcl-left">
          <div class="row">
            <img class="col-5 left-head-img" src="img/me.jpg">
            <div class="col-7">
              <p>姓名：LXQ</p>
              <p>生日：9月13日</p>
              <p>专业：移动应用开发</p>
              <p>爱好：计算机编程，看书</p>
              <p>座右铭：生于忧患，死于安乐</p>
            </div>
          </div>
        </div>
        <div class="col-md-6 dvcl-right">
          <p class="">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac feugiat sapien.
            Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            Sed aliquet turpis sed dui fermentum, non facilisis felis ultricies.
            Integer vel diam ut nisl finibus ullamcorper a non ante.
            Nulla id velit in felis convallis pretium quis a velit.
            Curabitur eget consectetur enim. Praesent nec justo quis metus pharetra egestas.
            Vivamus ut scelerisque magna. Aenean quis vestibulum ex. Aliquam ornare risus at dolor tincidunt,
            nec vulputate leo hendrerit. Phasellus convallis sodales auctor.
          </p>
        </div>
      </div>
    </div>
    <!-- 专业技能 -->
    <div id="column-div-2" class="column-div">
      <div>
        <h2 class="text-danger text-center column-title col-sm-12">专业技能</h2>
      </div>
      <div class="row">
        <div class="col-md-6 ">
          <div id="main" class="prefer-work"></div>
        </div>
        <div class="col-md-6">
          <div id="main2" class="prefer-work"></div>
        </div>
      </div>
    </div>
    <!--未来规划 -->
    <div id="column-div-3" class="column-div">
      <div>
        <h2 class="text-danger text-center column-title col-sm-12">未来规划</h2>
      </div>
      <div class="container">
        <div class="row">
          <img src="img/future-play.jpg" class="col-12">
        </div>
        <!-- Vertical Steppers -->
        <div class="row mt-1">
          <div class="col-md-12">

            <!-- Stepers Wrapper -->
            <ul class="stepper stepper-vertical">

              <!-- First Step -->
              <li class="warning">
                <a>
                  <span class="circle">1</span>
                  <span class="label text-danger">First step</span>
                </a>
                <div class="step-content grey lighten-3">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate voluptate facere
                    iusto
                    quaerat
                    vitae excepturi, accusantium ut aliquam repellat atque nesciunt nostrum similique. Inventore
                    nostrum
                    ut,
                    nobis porro sapiente.</p>
                </div>
              </li>

              <!-- Second Step -->
              <li class="warning">

                <!--Section Title -->
                <a>
                  <span class="circle">2</span>
                  <span class="label text-danger">Second step</span>
                </a>

                <!-- Section Description -->
                <div class="step-content grey lighten-3">

                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error excepturi veniam nemo
                    repellendus, distinctio soluta vitae at sit saepe. Optio eaque quia excepturi adipisci pariatur
                    totam,
                    atque odit fugiat.</p>

                </div>
              </li>

              <!-- Third Step -->
              <li class="warning">
                <a>
                  <span class="circle">3</span>
                  <span class="label text-danger">Third step</span>
                </a>
                <!-- Section Description -->
                <div class="step-content grey lighten-3">

                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error excepturi veniam nemo
                    repellendus, distinctio soluta vitae at sit saepe. Optio eaque quia excepturi adipisci pariatur
                    totam,
                    atque odit fugiat.</p>

                </div>
              </li>

            </ul>
            <!-- /.Stepers Wrapper -->

          </div>
        </div>
        <!-- /.Vertical Steppers -->
      </div>
    </div>
    <!-- 作品展示 
    <div id="column-div-6" class="column-div">
      <div>
        <h2 class="text-danger text-center column-title col-sm-12">作品展示</h2>
      </div>
      <div style="padding-left: 50px;padding-right: 50px;">
        
      </div>
    </div>-->
    <!-- 我的日记 -->
    <div id="column-div-4" class="column-div">
      <div>
        <h2 class="text-danger text-center column-title col-sm-12">我的日记</h2>
      </div>
      <div id="my-diary">
        <div v-for="content in sites" class="my-card">
          <img src="img/me.jpg" class="my-card-img">
          <h3 class="my-card-h3">{{content.diary_title}}<span class="diary-date text-light">{{content.createdAt}}</span>
          </h3>
          <span class="my-card-span">{{content.diary_content}}</span>
          <div class="my-card-foot">
            <hr class="hr">
            <div class="my-thumb" v-on:click="pressThumb(content.objectId,content.thumb,content)">
              <div class="my-thumb-num">{{content.thumb}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 网站评论 -->
    <div id="column-div-5" class="column-div">
      <div>
        <h2 class="text-danger text-center column-title col-sm-12">网友评论</h2>
      </div>
      <div class="speak-container" id="speak-container">
        <div class="my-speak-card" v-for="content in sites">
          <h5 class="">{{content.name}}</h5>
          <p>{{content.message}}</p>
          <span class="right-bottom diary-date text-light" style="font-size: 12px;">
            {{content.createdAt}} {{content.province}}</span>
        </div>
      </div>
      <!-- 给我评论 -->
      <div class="contact-to-me">
        <!-- Material form login -->
        <div class="card">

          <h5 class="card-header danger-color white-text text-center py-4">
            <strong>给我评论</strong>
          </h5>

          <!--Card content-->
          <div class="card-body px-lg-5 pt-0">

            <!-- Form -->
            <form class="text-center" style="color: #757575;" action="" id="commit-form">

              <!--Basic textarea-->
              <div class="md-form amber-textarea active-amber-textarea">
                <textarea id="textarea_name" class="md-textarea form-control" rows="1"></textarea>
                <label for="form16">昵称</label>
              </div>

              <!--Basic textarea-->
              <div class="md-form amber-textarea active-amber-textarea">
                <textarea id="textarea_msg" class="md-textarea form-control" rows="5"></textarea>
                <label for="form16">评论内容</label>
              </div>


              <div class="d-flex justify-content-around">
                <div style="display: none;">
                  <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="defaultChecked2" checked>
                    <label class="custom-control-label" for="defaultChecked2">允许获取我所在的城市</label>
                  </div>
                </div>
              </div>

              <!-- Sign in button -->
              <button class="btn btn-outline-danger btn-rounded btn-block my-4 waves-effect z-depth-0" type="button"
                id="post-content">发送</button>
            </form>
            <!-- Form -->

          </div>

        </div>
        <!-- Material form login -->
      </div>
    </div>

  </main>
  <!-- Footer -->
  <footer class="page-footer font-small danger-color" style="width: 100%;margin-top: 50px;" id="html-end">

    <!-- Copyright -->
    <div class="footer-copyright text-center py-3" style="width: 100%;">© 2020 Copyright:
      <span class="text-white"> LXQ 版本：2.0</span>
    </div>
    <!-- Copyright -->

  </footer>
  <!-- Footer -->



  <!-- 显示通知 -->
  <div style="width: 100%;">
    <!-- Button trigger modal-->
    <button id="show-msg" type="button" class="btn btn-primary" style="display: none;" data-toggle="modal"
      data-target="#top-msg">弹窗触发器</button>

    <!--Modal: modalCookie-->
    <div class="modal fade top" id="top-msg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
      aria-hidden="true" data-backdrop="true">
      <div class="modal-dialog modal-frame modal-top modal-notify modal-info" role="document">
        <!--Content-->
        <div class="modal-content">
          <!--Body-->
          <div class="modal-body">
            <div class="row d-flex justify-content-center align-items-center">

              <p class="pt-3 pr-2 text-danger" id="msg-content">{{msg}}</p>

              <a type="button" class="btn btn-outline-danger waves-effect" data-dismiss="modal">关闭</a>
            </div>
          </div>
        </div>
        <!--/.Content-->
      </div>
    </div>
  </div>
  <!--Modal: modalCookie-->

  <!-- 模态框，用于第一次进入网页时显示通知 -->
  <!-- Button trigger modal -->
  <button type="button" id="btn_notice" class="btn btn-primary" style="display: none;" data-toggle="modal"
    data-target="#basicExampleModal">
  </button>

  <!-- Modal -->
  <div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="notice-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" id="notice-content">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn danger-color text-white" data-dismiss="modal">确定</button>
        </div>
      </div>
    </div>
  </div>
  <script>

  </script>
  <!-- 模态框代码结束 -->

  <!-- 导入index2.js -->
  <script src="js/index.js"></script>
</body>

</html>